<template>
  <div class="GUserList">
    <filterPanel filterName="GUserListFilter" filterTitle="用户查询" :filterList="filterData"
                 @filterChange="filterChange"></filterPanel>
    <tablePanel tableName="GUserListTable" :tableLoading="loading" tableTitle="用户列表" :tableList="tableList"
                :tableData="tableData" :total="total" :currentPage="form.page_start" :pageSize="form.page_size"
                @sizeChange="sizeChange" @pageChange="pageChange" @tableClick="tableClick">
      <zy-button @click="add" v-if="isAdd" type="primary">新增用户</zy-button>
    </tablePanel>
    <zyModel :show="show" :title="modelTitle" @submit="submit" @close="close">
      <div class="userChange">
        <zy-modal-info cell-num="2" :model-info="modelInfo"></zy-modal-info>
      </div>
    </zyModel>
  </div>
</template>

<script>
	import {mapGetters} from "vuex";

	export default {
		name: "GUserList",
		props: {},
		data() {
			return {
				modelTitle: '',
				show: false,
				modelInfo: [
					{
						title: '用户名',
						name: 'account',
						type: 'input',
						value: '',
						readonly: false,
						titleClass: 'required',
					},
					{
						title: '密码',
						name: 'password',
						type: 'input',
						value: '',
						readonly: false,
						titleClass: 'required',
					},
					{
						title: '真实姓名',
						name: 'user_name',
						type: 'input',
						value: '',
						readonly: false,
						titleClass: 'required',
					},
					{
						title: '所属角色',
						name: 'role_id',
						type: 'select',
						optionList: this.roleList,
						value: '',
						readonly: false,
						titleClass: 'required',
					},
					{
						title: '所属组织',
						name: 'department_id',
						type: 'select',
						optionList: this.organizationList,
						value: '',
						readonly: false,
						titleClass: 'required',
					},
					{
						title: '联系电话',
						name: 'mobile',
						type: 'input',
						value: '',
						readonly: false,
						titleClass: 'required',
					},
					{
						title: '电子邮箱',
						name: 'email',
						type: 'input',
						value: '',
						readonly: false,
						titleClass: '',
					},
				],
				currentPath: '/account_list',
				filterData: [
					{
						title: '用户名',
						name: 'account',
						type: 'input',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '真实姓名',
						name: 'user_name',
						type: 'input',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '角色',
						name: 'role_id',
						type: 'select',
						optionList: this.roleList,
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '组织',
						name: 'department_id',
						type: 'select',
						optionList: this.organizationList,
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '创建时间',
						name: 'time',
						type: 'date',
						value: [],
						isShow: true,
						isSelected: true
					},
					{
						title: '最后登录时间',
						name: 'last_login_time',
						type: 'date',
						value: [],
						isShow: true,
						isSelected: true
					},
				],
				form: {
					account: '',
					user_name: '',
					role_id: '',
					department_id: '',
					time: [],
					last_login_time: [],
					page_start: 1,
					page_size: 10
				},
				loading: false,
				tableList: [
					{
						title: '用户名',
						width: 120,
						name: 'account',
						isShow: true,
						isSelected: true
					},
					{
						title: '真实姓名',
						width: 120,
						name: 'user_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '角色',
						width: 160,
						name: 'role_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '组织',
						width: 160,
						name: 'department_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '最后登录时间',
						width: 180,
						name: 'last_login_time',
						isShow: true,
						isSelected: true
					},
					{
						title: '创建时间',
						width: 180,
						name: 'time',
						isShow: true,
						isSelected: true
					},
					{
						title: '操作',
						width: 200,
						name: 'handler',
						fixed: 'right',
						btns: [
							// {
							// 	type: 'detail',
							// 	name: '详情'
							// },
							{
								type: 'edit',
								name: '编辑'
							},
							{
								type: 'delete',
								name: '删除',
								btnType: 'danger'
							},
						],
						isSelected: true
					}
				],
				tableData: [],
				total: 0,
				download_url: '',
				roleList: [],
				organizationList: [],
				user_id: ''
			};
		},
		computed: {
			postData() {
				let data = {
					account: this.form.account,
					user_name: this.form.user_name,
					role_id: this.form.role_id,
					department_id: this.form.department_id,
					pagination: {
						page_start: this.form.page_start,
						page_size: this.form.page_size
					}
				};
				if (this.form.time && this.form.time.length > 0) {
					data.start_time = this.form.time[0] / 1000;
					data.end_time = this.form.time[1] / 1000;
				}
				if (this.form.last_login_time && this.form.last_login_time.length > 0) {
					data.start_time = this.form.time[0] / 1000;
					data.end_time = this.form.time[1] / 1000;
				}
				return data;
			},
			...mapGetters(['authority']),
			isAdd() {
				return this.authority[this.currentPath] && this.authority[this.currentPath].i;
			},
			isLook() {
				return this.authority[this.currentPath] && this.authority[this.currentPath].m;
			},
			isEdit() {
				return this.authority[this.currentPath] && this.authority[this.currentPath].m;
			},
			isDel() {
				return this.authority[this.currentPath] && this.authority[this.currentPath].d;
			},
		},
		watch: {
			roleList: {
				handler(newValue, oldValue) {
					if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
						this.setFilterData(newValue, ['role_id']);
						this.setModelData(newValue, ['role_id']);
					}
				},
				deep: true
			},
			organizationList: {
				handler(newValue, oldValue) {
					if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
						this.setFilterData(newValue, ['department_id']);
						this.setModelData(newValue, ['department_id']);
					}
				},
				deep: true
			},
		},
		components: {},
		methods: {
			setModelData(data, list) {
				this.modelInfo.forEach(item => {
					if (list.includes(item.name)) {
						item.optionList = data;
					}
				})
			},
			setFilterData(data, list) {
				this.filterData.forEach(item => {
					if (list.includes(item.name)) {
						item.optionList = data;
					}
				})
			},
			close(isRefresh) {
				this.modelTitle = '';
				this.user_id = ''
				this.show = false;
				this.modelInfo.forEach(item => {
					item.value = ''
				})
				if (isRefresh) this.getData();
			},
			submit() {
				let postData = {
					user_id: this.user_id || ''
				}
				this.modelInfo.forEach(item => {
					postData[item.name] = item.value;
				});
				this.$axios.post(this.$api.admin_saveUser, {...postData}).then(res => {
					let {code, msg} = res;
					if (code == 200) {
						this.$message.success(msg);
						this.close(true);
					} else {
						this.$message.error(msg)
					}
				});
			},
			// 新增
			add() {
				this.show = true;
				this.modelTitle = '新增账号'
			},
			sizeChange(val) {
				this.form.page_size = val;
				this.getData()
			},
			pageChange(val) {
				this.form.page_start = val;
				this.getData()
			},
			filterChange(data) {
				this.form = {...this.form, ...data};
				this.getData();
			},
			getData() {
				this.loading = true;
				this.tableData = [];
				this.$axios.post(this.$api.admin_userList, {...this.postData}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.tableData = data.list.filter(item => {
							// item.detail = this.isLook;
							item.edit = this.isEdit;
							item.delete = this.isDel;
							return item;
						});
						this.total = data.pagination.total_count || 0;
					} else {
						this.tableData = []
						this.total = 0;
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			tableClick(data, type) {
				let {user_id} = data;
				switch (type) {
					// case 'detail':
					// 	this.$toRoutePath({
					// 		path: "/account_list/account_detail",
					// 		edit: true,
					// 		query: {user_id, type}
					// 	});
					// 	break;
					case 'edit':
						this.show = true;
						this.modelTitle = '修改账号';
						this.modelInfo = this.modelInfo.filter(item => {
							for (let key in data) {
								item.value = data[item.name];
							}
							return item
						});
						this.user_id = data.user_id
						break
					case 'delete':
						this.deleted(user_id)
						break;
				}
			},
			// 删除
			deleted(user_id) {
				this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
					customClass: 'message',
				}).then(() => {
					this.$axios.post(this.$api.admin_delUser, {user_id}).then(res => {
						let {msg, code} = res;
						if (code === 200) {
							this.getData();
							this.$message.success("删除成功！");
						} else {
							this.$message.error(msg)
						}
					});
				}).catch(() => {
					this.$message.info("已取消删除");
				});
			},
			getRoleData() {
				this.$axios.post(this.$api.admin_allRole, {}).then(res => {
					let {code, data, msg} = res;
					if (code === 200) {
						this.roleList = data.filter(item => {
							item.value = item.role_id;
							item.label = item.role_name;
							return item;
						}) || []
					} else {
						this.$message.error(msg)
					}
				});
			},
			getOrganizationData() {
				this.$axios.post(this.$api.admin_allDepartment, {}).then(res => {
					let {code, data, msg} = res;
					if (code === 200) {
						this.organizationList = data.filter(item => {
							item.value = item.department_id;
							item.label = item.department_name;
							return item;
						}) || [];
					} else {
						this.$message.error(msg)
					}
				});
			}
		},
		mounted() {
			this.getData();
			this.getRoleData();
			this.getOrganizationData();
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/government/systemManage/userList/index.less">

</style>
